<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Unconstrained Layout</title>
<style>
@import url(../style.css);

.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.link {
  stroke: #999;
  stroke-opacity: .8;
}

</style>
</head>
<body>
    <a href="../index.html">cola.js home</a>
    <h1>Unconstrained graph layout</h1>
<script src="../extern/d3v4.js"></script>
<script src="../cola.min.js"></script>
<script>
    var width = 960,
        height = 500;

    var color = d3.scaleOrdinal(d3.schemeCategory20);

    var cola = cola.d3adaptor(d3)
        .size([width, height]);

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

    d3.json("graphdata/miserables.json", function (error, graph) {
        cola
            .nodes(graph.nodes)
            .links(graph.links)
            .jaccardLinkLengths(40,0.7)
            .start(30);

        var link = svg.selectAll(".link")
            .data(graph.links)
          .enter().append("line")
            .attr("class", "link")
            .style("stroke-width", function (d) { return Math.sqrt(d.value); });

        var node = svg.selectAll(".node")
            .data(graph.nodes)
          .enter().append("circle")
            .attr("class", "node")
            .attr("r", 5)
            .style("fill", function (d) { return color(d.group); })
            .call(cola.drag);

        node.append("title")
            .text(function (d) { return d.name; });

        cola.on("tick", function () {
            link.attr("x1", function (d) { return d.source.x; })
                .attr("y1", function (d) { return d.source.y; })
                .attr("x2", function (d) { return d.target.x; })
                .attr("y2", function (d) { return d.target.y; });

            node.attr("cx", function (d) { return d.x; })
                .attr("cy", function (d) { return d.y; });
        });
    });

</script>
    <p>There are no constraints in this graph.  This is what happens if you use CoLa as a drop-in replacement for D3 Force layout.
        You should notice that compared to <a href="http://bl.ocks.org/mbostock/4062045">D3 Force layout</a>, CoLa has much nicer convergence properties.  That is, it glides smoothly
        to a local minimum in the layout objective function with no "jitter". </p>
    <p>To be precise, it monotonically reduces the "stress" of the layout.
        The improved stability is also noticable
        when you drag nodes around interactively.
    </p>
    <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-63535113-1', 'auto');
  ga('send', 'pageview');

    </script>
</body>
</html>
